<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页 - 知乎</title>
  <link rel="stylesheet" href="/style/main.css">
  <link rel="stylesheet icon" href="https://static.zhihu.com/heifetz/assets/apple-touch-icon-152.a53ae37b.png">
  <!-- <script src="https://unpkg.com/vue@next"></script> -->
</head>

<body>
  <div id="app" class="app">
    <div class="header1">
      <div class="header">
        <a href="#">
          <svg viewBox="0 0 64 30" fill="#0066FF" width="64" height="30">
            <path
              d="M29.05 4.582H16.733V25.94h3.018l.403 2.572 4.081-2.572h4.815V4.582zm-5.207 18.69l-2.396 1.509-.235-1.508h-1.724V7.233h6.78v16.04h-2.425zM14.46 14.191H9.982c0-.471.033-.954.039-1.458v-5.5h5.106V5.935a1.352 1.352 0 0 0-.404-.957 1.378 1.378 0 0 0-.968-.396H5.783c.028-.088.056-.177.084-.255.274-.82 1.153-3.326 1.153-3.326a4.262 4.262 0 0 0-2.413.698c-.57.4-.912.682-1.371 1.946-.532 1.453-.997 2.856-1.31 3.693C1.444 8.674.28 11.025.28 11.025a5.85 5.85 0 0 0 2.52-.61c1.119-.593 1.679-1.502 2.054-2.883l.09-.3h2.334v5.5c0 .5-.045.982-.073 1.46h-4.12c-.71 0-1.39.278-1.893.775a2.638 2.638 0 0 0-.783 1.874h6.527a17.717 17.717 0 0 1-.778 3.649 16.796 16.796 0 0 1-3.012 5.273A33.104 33.104 0 0 1 0 28.74s3.13 1.175 5.425-.954c1.388-1.292 2.631-3.814 3.23-5.727a28.09 28.09 0 0 0 1.12-5.229h5.967v-1.37a1.254 1.254 0 0 0-.373-.899 1.279 1.279 0 0 0-.909-.37z">
            </path>
            <path
              d="M11.27 19.675l-2.312 1.491 5.038 7.458a6.905 6.905 0 0 0 .672-2.218 3.15 3.15 0 0 0-.28-2.168l-3.118-4.563zM51.449 15.195V5.842c4.181-.205 7.988-.405 9.438-.483l.851-.05c.387-.399.885-2.395.689-3.021-.073-.25-.213-.666-.638-.555a33.279 33.279 0 0 1-4.277.727c-2.766.321-3.97.404-7.804.682-6.718.487-12.709.72-12.709.72a2.518 2.518 0 0 0 .788 1.834 2.567 2.567 0 0 0 1.883.706c2.278-.095 5.598-.25 8.996-.41v9.203h-12.78c0 .703.281 1.377.783 1.874a2.69 2.69 0 0 0 1.892.777h10.105v7.075c0 .887-.464 1.192-1.231 1.214h-3.92a4.15 4.15 0 0 0 .837 1.544 4.2 4.2 0 0 0 1.403 1.067 6.215 6.215 0 0 0 2.71.277c1.36-.066 2.967-.826 2.967-3.57v-7.607h11.28c.342 0 .67-.135.91-.374.242-.239.378-.563.378-.902v-1.375H51.449z">
            </path>
            <path
              d="M42.614 8.873a2.304 2.304 0 0 0-1.508-.926 2.334 2.334 0 0 0-1.727.405l-.376.272 4.255 5.85 2.24-1.62-2.884-3.98zM57.35 8.68l-3.125 4.097 2.24 1.663 4.517-5.927-.375-.277a2.32 2.32 0 0 0-1.722-.452 2.327 2.327 0 0 0-1.536.896z">
            </path>
          </svg>
        </a>
        <ul class="flex">
          <li class="Header-Tabs">
            <a href="#">首页</a>
          </li>
          <li class="Header-Tabs">
            <a href="#">会员</a>
          </li>
          <li class="Header-Tabs">
            <a href="#">发现</a>
          </li>
          <li class="Header-Tabs">
            <a href="#">等你来答</a>
          </li>
        </ul>

        <div class="search">
          <form action="">
            <input type="text" placeholder="罗小黑第31集">
            <button>提问</button>
          </form>
        </div>

        <div class="userInfo flex">
          <div class="notice">
            <button>
              <span>
                <svg class="Zi Zi--Bell" fill="currentColor" viewBox="0 0 24 24" width="22" height="22">
                  <path
                    d="M4.523 15.076l.804-6.757a6.753 6.753 0 0 1 4.945-5.7 1.823 1.823 0 0 1 3.623 0 6.753 6.753 0 0 1 4.945 5.7l.804 6.757a2.293 2.293 0 0 0 1.712 2.108 1.093 1.093 0 0 1-.297 2.15H3.108a1.093 1.093 0 0 1-.297-2.15 2.293 2.293 0 0 0 1.712-2.108zM12.083 23a2.758 2.758 0 0 1-2.753-2.509.229.229 0 0 1 .232-.24h5.043a.229.229 0 0 1 .232.24 2.759 2.759 0 0 1-2.753 2.51z">
                  </path>
                </svg>
              </span>
              <div>80</div>
            </button>
          </div>

          <div class="message">
            <button>
              <span>
                <svg class="Zi Zi--Comments" fill="currentColor" viewBox="0 0 24 24" width="22" height="22">
                  <path
                    d="M11 2c5.571 0 9 4.335 9 8 0 6-6.475 9.764-11.481 8.022-.315-.07-.379-.124-.78.078-1.455.54-2.413.921-3.525 1.122-.483.087-.916-.25-.588-.581 0 0 .677-.417.842-1.904.064-.351-.14-.879-.454-1.171A8.833 8.833 0 0 1 2 10c0-3.87 3.394-8 9-8zm10.14 9.628c.758.988.86 2.009.86 3.15 0 1.195-.619 3.11-1.368 3.938-.209.23-.354.467-.308.722.12 1.073.614 1.501.614 1.501.237.239-.188.562-.537.5-.803-.146-1.495-.42-2.546-.811-.29-.146-.336-.106-.563-.057-2.043.711-4.398.475-6.083-.927 5.965-.524 8.727-3.03 9.93-8.016z"
                    fill-rule="evenodd"></path>
                </svg>
              </span>
              <div>80</div>
            </button>
          </div>

          <div class="userIcon">
            <button><img src="https://pic1.zhimg.com/v2-53b10c860be0710005840b22c2c33cf8_is.jpg" alt="">
            </button>
          </div>
        </div>
      </div>
      <span class="line"></span>
    </div>

    <div class="main flex">
      <div class="content_l">
        <a href="#"><img src="https://pic2.zhimg.com/v2-c0a3f0e052244cd1aa4f9e74b84e8605.png" alt=""></a>

        <div class="titleCard">
          <div class="recommendCard">
            <div class="flex">
              <a href="#">推荐</a>
              <a href="#">关注</a>
              <a href="#">热榜</a>
            </div>
          </div>

          <div class="contentCard">
            <div class="contentItem">
              <a href="#">
                <h2>罗小黑战记为什么又叫阿根战记？</h2>
              </a>
              <div>
                <span><a href="#">卡里：</a><a href="#">
                    建议你了解一下产品的开发流程和每个职位在其中负责的事情。 大概流程是：产品-交互-UI-前端(后端)-测试-反复迭代。 工作中的职责上来…
                  </a></span>
                <button>阅读全文<span></span></button>
              </div>

              <div class="statusBar">
                <span><button><span><svg class="Zi Zi--TriangleUp VoteButton-TriangleUp" fill="currentColor" viewBox="0 0 24 24" width="10" height="10"><path d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z" fill-rule="evenodd"></path></svg></span> 赞同 99</button><button>
                    <svg class="Zi Zi--TriangleDown" fill="currentColor" viewBox="0 0 24 24" width="10" height="10">
                      <path
                        d="M20.044 3H3.956C2.876 3 2 3.517 2 4.9c0 .326.087.533.236.896L10.216 19c.355.571.87 1.143 1.784 1.143s1.429-.572 1.784-1.143l7.98-13.204c.149-.363.236-.57.236-.896 0-1.386-.876-1.9-1.956-1.9z"
                        fill-rule="evenodd"></path>
                    </svg>
                  </button></span>
                  <!-- icon我不想加了 -->
                <button>9条评论</button>
                <button>分享</button>
                <button>收藏</button>
                <button>喜欢</button>
                <button>...</button>
              </div>
            </div>

            <!-- 测试 -->
            <div class="contentItem">
              <a href="#">
                <h2>罗小黑战记为什么又叫阿根战记？</h2>
              </a>
              <div>
                <span>卡里：<a href="#">
                    建议你了解一下产品的开发流程和每个职位在其中负责的事情。 大概流程是：产品-交互-UI-前端(后端)-测试-反复迭代。 工作中的职责上来…
                  </a></span>
                <button>阅读全文<span></span></button>
              </div>

              <div class="statusBar">
                <span><button>点赞</button><button>取消</button></span>
                <button>添加内容</button>
                <button>分享</button>
                <button>收藏</button>
                <button>喜欢</button>
                <button>...</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content_r">
        <div class="globalWrite">
          <div class="globalWriteTop flex">

            <a href="#">
              <svg width="40" height="40" viewBox="0 0 40 40" class="GlobalWrite-navIcon" fill="currentColor">
                <g fill="#06F" fill-rule="evenodd">
                  <circle cx="20" cy="20" r="20" opacity=".12"></circle>
                  <path
                    d="M23.487 10.463c1.896 0 2.583.193 3.277.555a3.824 3.824 0 011.607 1.573c.371.678.569 1.35.569 3.206v8.472c0 1.855-.198 2.527-.569 3.205a3.824 3.824 0 01-1.607 1.573c-.694.363-1.381.556-3.277.556h-6.96c-1.895 0-2.583-.193-3.276-.556a3.824 3.824 0 01-1.608-1.573c-.37-.678-.568-1.35-.568-3.205v-8.472c0-1.855.197-2.528.568-3.206.37-.678.915-1.21 1.608-1.573.693-.362 1.38-.556 3.277-.556h6.959zm0 2.08h-6.96c-1.407 0-1.836.081-2.273.31a1.72 1.72 0 00-.735.72c-.234.427-.317.847-.317 2.224v8.472c0 1.377.083 1.796.317 2.224.172.316.412.551.735.72.437.229.866.31 2.274.31h6.959c1.407 0 1.836-.081 2.274-.31a1.72 1.72 0 00.735-.72c.234-.428.317-.847.317-2.224v-8.472c0-1.377-.083-1.797-.317-2.225a1.72 1.72 0 00-.735-.72c-.438-.228-.867-.309-2.274-.309zm-1.991 9.778v1.873h-5.955V22.32h5.955zm2.977-3.328v1.872h-8.932v-1.872h8.932zm0-3.33v1.873h-8.932v-1.872h8.932z"
                    fill-rule="nonzero"></path>
                </g>
              </svg>
              <span>回答问题</span>
            </a>

            <a href="#">
              <svg width="40" height="40" viewBox="0 0 40 40" class="GlobalWrite-navIcon" fill="currentColor">
                <g fill="#06F" fill-rule="evenodd">
                  <circle cx="20" cy="20" r="20" opacity=".12"></circle>
                  <path
                    d="M23.487 10.463c1.896 0 2.583.193 3.277.555a3.824 3.824 0 011.607 1.573c.371.678.569 1.35.569 3.206v8.472c0 1.855-.198 2.527-.569 3.205a3.824 3.824 0 01-1.607 1.573c-.694.363-1.381.556-3.277.556h-6.96c-1.895 0-2.583-.193-3.276-.556a3.824 3.824 0 01-1.608-1.573c-.37-.678-.568-1.35-.568-3.205v-8.472c0-1.855.197-2.528.568-3.206.37-.678.915-1.21 1.608-1.573.693-.362 1.38-.556 3.277-.556h6.959zm0 2.08h-6.96c-1.407 0-1.836.081-2.273.31a1.72 1.72 0 00-.735.72c-.234.427-.317.847-.317 2.224v8.472c0 1.377.083 1.796.317 2.224.172.316.412.551.735.72.437.229.866.31 2.274.31h6.959c1.407 0 1.836-.081 2.274-.31a1.72 1.72 0 00.735-.72c.234-.428.317-.847.317-2.224v-8.472c0-1.377-.083-1.797-.317-2.225a1.72 1.72 0 00-.735-.72c-.438-.228-.867-.309-2.274-.309zm-1.991 9.778v1.873h-5.955V22.32h5.955zm2.977-3.328v1.872h-8.932v-1.872h8.932zm0-3.33v1.873h-8.932v-1.872h8.932z"
                    fill-rule="nonzero"></path>
                </g>
              </svg>
              <span>发视频</span>
            </a>

            <a href="#">
              <svg width="40" height="40" viewBox="0 0 40 40" class="GlobalWrite-navIcon" fill="currentColor">
                <g fill="#06F" fill-rule="evenodd">
                  <circle cx="20" cy="20" r="20" opacity=".12"></circle>
                  <path
                    d="M23.487 10.463c1.896 0 2.583.193 3.277.555a3.824 3.824 0 011.607 1.573c.371.678.569 1.35.569 3.206v8.472c0 1.855-.198 2.527-.569 3.205a3.824 3.824 0 01-1.607 1.573c-.694.363-1.381.556-3.277.556h-6.96c-1.895 0-2.583-.193-3.276-.556a3.824 3.824 0 01-1.608-1.573c-.37-.678-.568-1.35-.568-3.205v-8.472c0-1.855.197-2.528.568-3.206.37-.678.915-1.21 1.608-1.573.693-.362 1.38-.556 3.277-.556h6.959zm0 2.08h-6.96c-1.407 0-1.836.081-2.273.31a1.72 1.72 0 00-.735.72c-.234.427-.317.847-.317 2.224v8.472c0 1.377.083 1.796.317 2.224.172.316.412.551.735.72.437.229.866.31 2.274.31h6.959c1.407 0 1.836-.081 2.274-.31a1.72 1.72 0 00.735-.72c.234-.428.317-.847.317-2.224v-8.472c0-1.377-.083-1.797-.317-2.225a1.72 1.72 0 00-.735-.72c-.438-.228-.867-.309-2.274-.309zm-1.991 9.778v1.873h-5.955V22.32h5.955zm2.977-3.328v1.872h-8.932v-1.872h8.932zm0-3.33v1.873h-8.932v-1.872h8.932z"
                    fill-rule="nonzero"></path>
                </g>
              </svg>
              <span>发文章</span>
            </a>

            <a href="#">
              <svg width="40" height="40" viewBox="0 0 40 40" class="GlobalWrite-navIcon" fill="currentColor">
                <g fill="#06F" fill-rule="evenodd">
                  <circle cx="20" cy="20" r="20" opacity=".12"></circle>
                  <path
                    d="M23.487 10.463c1.896 0 2.583.193 3.277.555a3.824 3.824 0 011.607 1.573c.371.678.569 1.35.569 3.206v8.472c0 1.855-.198 2.527-.569 3.205a3.824 3.824 0 01-1.607 1.573c-.694.363-1.381.556-3.277.556h-6.96c-1.895 0-2.583-.193-3.276-.556a3.824 3.824 0 01-1.608-1.573c-.37-.678-.568-1.35-.568-3.205v-8.472c0-1.855.197-2.528.568-3.206.37-.678.915-1.21 1.608-1.573.693-.362 1.38-.556 3.277-.556h6.959zm0 2.08h-6.96c-1.407 0-1.836.081-2.273.31a1.72 1.72 0 00-.735.72c-.234.427-.317.847-.317 2.224v8.472c0 1.377.083 1.796.317 2.224.172.316.412.551.735.72.437.229.866.31 2.274.31h6.959c1.407 0 1.836-.081 2.274-.31a1.72 1.72 0 00.735-.72c.234-.428.317-.847.317-2.224v-8.472c0-1.377-.083-1.797-.317-2.225a1.72 1.72 0 00-.735-.72c-.438-.228-.867-.309-2.274-.309zm-1.991 9.778v1.873h-5.955V22.32h5.955zm2.977-3.328v1.872h-8.932v-1.872h8.932zm0-3.33v1.873h-8.932v-1.872h8.932z"
                    fill-rule="nonzero"></path>
                </g>
              </svg>
              <span>写想法</span>
            </a>

          </div>

          <div class="globalWriteButton flex">
            <a href="#" class="flex">回答问题</a>
            <a href="#" class="flex">草稿箱<span>2</span></a>
          </div>
        </div>

        <div class="creatorEntrance">
          <a href="#">
            <div class="creatorEntranceTop">
              <svg class="Zi Zi--Creator CreatorEntrance-creatorIcon" fill="currentColor" viewBox="0 0 24 24" width="24"
                height="24">
                <path
                  d="M15.075 15.388l-3.024 3.024a4.041 4.041 0 0 0-1.014 1.697l-.26.868C7.844 20.986 4.91 21 2 21c.026-3.325 0-3.304.59-3.956 1.237-1.368 6.251-.68 6.44-2.976.043-.518-.36-1.06-.725-1.69C6.285 8.87 5.512 2 11.5 2c5.988 0 5.15 7.072 3.246 10.378-.357.62-.795 1.217-.724 1.77.073.571.477.958 1.053 1.24zm5.402 1.672c.523.55.523.646.523 3.94a535.11 535.11 0 0 0-4.434-.028l3.911-3.912zm-7.88 2.699c.111-.37.312-.705.584-.978l4.76-4.76a.291.291 0 0 1 .412 0l1.626 1.626a.291.291 0 0 1 0 .411l-4.76 4.76c-.272.273-.608.474-.978.585l-1.96.588a.219.219 0 0 1-.272-.272l.589-1.96zm9.157-6.742a.839.839 0 0 1 0 1.187l-.94.94a.28.28 0 0 1-.395 0l-1.563-1.563a.28.28 0 0 1 0-.395l.94-.94a.839.839 0 0 1 1.187 0l.771.771z"
                  fill-rule="evenodd"></path>
              </svg>

              <div>创作中心<span>Lv 1</span></div>

              <span>右三角</span>
            </div>
            <div class="creatorEntranceMiddle">
              <div class="creatorEntranceMiddle_L">
                <span>昨日阅读（播放）数</span>
                0
                <span>比前日 ——</span>
              </div>

              <div class="creatorEntranceMiddle_R">
                <span>昨日赞同数</span>
                0
                <span>比前日 ——</span>
              </div>
            </div>
            <div class="creatorEntranceButton">
              瓦力保镖为你的创作提供持续保护
              <span>
                <svg width="17" height="17" viewBox="0 0 16 16" class="css-14gt3bc" fill="currentColor">
                  <path
                    d="M8 3l.737.339.428.187.377.158.326.127c.15.055.282.1.395.133.55.161 1.297.157 2.237-.014l-.002 3.784c0 3.07-2.52 4.76-4.498 5.286-1.977-.527-4.498-2.216-4.498-5.286L3.5 3.93c.94.17 1.686.175 2.237.014C6.187 3.812 6.941 3.497 8 3zm2.38 3.066L7.599 8.834 6.32 7.566a.4.4 0 00-.554.554l1.55 1.55a.5.5 0 00.568 0l3.05-3.05a.4.4 0 00-.554-.554z">
                  </path>
                </svg>
              </span>
            </div>
          </a>
        </div>

        <div class="functionModule">
          <ul>
            <li>
              <a href="#">
                <span>
                  <svg class="Zi Zi--Live" fill="currentColor" viewBox="0 0 24 24" width="24" height="24">
                    <path
                      d="M13.693 10.354l1.634-7.542c.195-.901-.16-1.083-.798-.39l-9.18 9.97c-.638.693-.377 1.254.582 1.254h5.376l-1.634 7.542c-.195.901.16 1.083.798.39l9.18-9.97c.638-.693.377-1.254-.582-1.254h-5.376z">
                    </path>
                  </svg>
                </span>
                <span>Live</span>
              </a>
            </li>

            <li>
              <a href="#">
                <span>
                  <svg class="Zi Zi--Live" fill="currentColor" viewBox="0 0 24 24" width="24" height="24">
                    <path
                      d="M13.693 10.354l1.634-7.542c.195-.901-.16-1.083-.798-.39l-9.18 9.97c-.638.693-.377 1.254.582 1.254h5.376l-1.634 7.542c-.195.901.16 1.083.798.39l9.18-9.97c.638-.693.377-1.254-.582-1.254h-5.376z">
                    </path>
                  </svg>
                </span>
                <span>书店</span>
              </a>
            </li>

            <li>
              <a href="#">
                <span>
                  <svg class="Zi Zi--Live" fill="currentColor" viewBox="0 0 24 24" width="24" height="24">
                    <path
                      d="M13.693 10.354l1.634-7.542c.195-.901-.16-1.083-.798-.39l-9.18 9.97c-.638.693-.377 1.254.582 1.254h5.376l-1.634 7.542c-.195.901.16 1.083.798.39l9.18-9.97c.638-.693.377-1.254-.582-1.254h-5.376z">
                    </path>
                  </svg>
                </span>
                <span>圆桌</span>
              </a>
            </li>

            <li>
              <a href="#">
                <span>
                  <svg class="Zi Zi--Live" fill="currentColor" viewBox="0 0 24 24" width="24" height="24">
                    <path
                      d="M13.693 10.354l1.634-7.542c.195-.901-.16-1.083-.798-.39l-9.18 9.97c-.638.693-.377 1.254.582 1.254h5.376l-1.634 7.542c-.195.901.16 1.083.798.39l9.18-9.97c.638-.693.377-1.254-.582-1.254h-5.376z">
                    </path>
                  </svg>
                </span>
                <span>专栏</span>
              </a>
            </li>

            <li>
              <a href="#">
                <span>
                  <svg class="Zi Zi--Live" fill="currentColor" viewBox="0 0 24 24" width="24" height="24">
                    <path
                      d="M13.693 10.354l1.634-7.542c.195-.901-.16-1.083-.798-.39l-9.18 9.97c-.638.693-.377 1.254.582 1.254h5.376l-1.634 7.542c-.195.901.16 1.083.798.39l9.18-9.97c.638-.693.377-1.254-.582-1.254h-5.376z">
                    </path>
                  </svg>
                </span>
                <span>付费咨询</span>
              </a>
            </li>

            <li>
              <a href="#">
                <span>
                  <svg class="Zi Zi--Live" fill="currentColor" viewBox="0 0 24 24" width="24" height="24">
                    <path
                      d="M13.693 10.354l1.634-7.542c.195-.901-.16-1.083-.798-.39l-9.18 9.97c-.638.693-.377 1.254.582 1.254h5.376l-1.634 7.542c-.195.901.16 1.083.798.39l9.18-9.97c.638-.693.377-1.254-.582-1.254h-5.376z">
                    </path>
                  </svg>
                </span>
                <span>百科</span>
              </a>
            </li>
          </ul>
        </div>

        <div class="adBrd">
          <a href="#">
            <div>广告</div>
            <img src="https://pic2.zhimg.com/v2-0c57fbaa726b5669d1c5754eeaac5145_540x450.png" alt="">
          </a>
          <span>X</span>
        </div>

        <div class="Card">
          <ul>
            <li><span></span>我的收藏<span>0</span></li>
            <li><span></span>我关注的问题<span>1</span></li>
            <li><span></span>我的邀请</li>
            <li><span></span>我的余额</li>
            <li><span></span>账务中心</li>
            <li><span></span>帮助中心</li>
            <li><span></span>版权服务中心</li>
          </ul>
        </div>

        <div class="adBrd">
          <a href="#">
            <div>广告</div>
            <img src="https://pic3.zhimg.com/v2-bc14ea3ee0693b72c1afff70c1e271ea_540x450.png" alt="">
          </a>
          <span>X</span>
        </div>

        <div class="footer">
          <a href="#">刘看山</a>·
          <a href="#">知乎指南</a>·
          <a href="#">支付协议</a>·
          <a href="#">知乎隐私保护指引</a>·
        </div>
      </div>
    </div>
  </div>
</body>
<script>
</script>

</html>